<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册 - 待办事项</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #4169E1 0%, #6495ED 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .register-container {
      background: rgba(255, 255, 255, 0.95);
      width: 380px;
      padding: 40px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
    }

    .register-container:hover {
      transform: translateY(-5px);
    }

    h2 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
    }

    .form-group {
      margin-bottom: 25px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: #555;
      font-size: 14px;
      font-weight: 500;
    }

    input {
      width: 100%;
      padding: 12px;
      border: 2px solid #e1e1e1;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    input:focus {
      border-color: #6495ED;
      outline: none;
      box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.1);
    }

    button {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #4169E1 0%, #6495ED 100%);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    button:active {
      transform: translateY(0);
    }

    .login-link {
      text-align: center;
      margin-top: 20px;
    }

    .login-link a {
      color: #6495ED;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s ease;
    }

    .login-link a:hover {
      color: #4169E1;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="register-container">
    <h2>注册</h2>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" required>
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" required>
    </div>
    <div class="form-group">
      <label for="confirmPassword">确认密码：</label>
      <input type="password" id="confirmPassword" required>
    </div>
    <button onclick="register()">注册</button>
    <div class="login-link">
      <a href="login.html">已有账号？去登录</a>
    </div>
  </div>
  <script>
    async function register() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const confirmPassword = document.getElementById('confirmPassword').value;

      if (password !== confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }

      try {
        const response = await fetch('http://localhost:8080/api/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ username, password })
        });

        if (response.ok) {
          alert('注册成功！请登录。');
          window.location.href = 'login.html';
        } else {
          const data = await response.json();
          alert(data.message || '注册失败，请重试。');
        }
      } catch (error) {
        console.error('注册错误:', error);
        alert('注册失败，请重试。');
      }
    }
  </script>
</body>

</html>